<template>
  <div>
    <router-link to="/" tag="div" v-show="isshow" class="return">
       <span class="iconfont headerback-bg">&#xe624;</span>
    </router-link>
    <router-link to="/" tag="div" v-show="!isshow" class="mp-header" :style="poacityobj">
       <span class="iconfont mp-header-left">&#xe624;</span>
       <h1 mp-role="title" class="mp-header-title">故宫</h1>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'HeaderFixed',
  data () {
    return {
      isshow: true,
      poacityobj: {
        opacity: 0
      }
    }
  },
  methods: {
    handleroll () {
      let srollheigh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // console.log(srollheigh)
      if (srollheigh > 10) {
        this.isshow = false
        this.poacityobj.opacity = srollheigh / 200
      } else {
        this.isshow = true
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleroll)
  }
}
</script>

<style lang="stylus" scoped="scoped">
.mp-header
 height: .88rem;
 background: #00bcd4;
 z-index: 99;
 position fixed
 width 100%
 top 0rem
 left 0rem
 display block
 opacity 0
 .mp-header-left
  position absolute
  font-size .36rem
  color #fff
  text-align center
  left 0
  top 0
  width .8rem
  height .88rem
  line-height .88rem
.mp-header-title
 overflow hidden
 margin 0 1rem
 line-height .88rem
 white-space nowrap
 text-overflow ellipsis
 font-size .32rem
 text-align center
 color: #fff
.return
  position fixed
  font-size .36rem
  color #fff
  text-align center
  left .1rem
  top .1rem
  width .72rem
  height .72rem
  line-height .72rem
  z-index 98
  .headerback-bg
   display block
   width .72rem
   height .72rem
   background-color #000
   opacity .5
   -webkit-border-radius .36rem
   -moz-border-radius .36rem
   border-radius .36rem
</style>
